// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Popconfirm, Row, Col, Button, Input } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
import { get } from 'lodash'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './couponDetailStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import { Grid, QueryCondition } from 'widget/Grid/index'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import cx from 'classnames';
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const couponDetailView = function ({ dispatch, model, form, location, x }) {
	// 表单的子函数
	const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
	// 取出model对象，命名空间
	const { modelObj, namespace } = model

	let { detail, couponsConfigId, tableData, pageConfig, loading,queryList } = modelObj
	let couponTypeMap = {
		'1': '代金券',
		'2': '折扣券'
	}

	const hx = function(id){
		dispatch({
			type: `${namespace}/updateStatus`,
			payload: {code:id,accountId:JSON.parse(localStorage.getItem('navBar')).accountId || '',name: JSON.parse(localStorage.getItem('realname')) || ''}
		})
	}
	// let flag = true
	
	// 表格模板配置

	
	const columns = [
		{
			key: "accountId", dataIndex: "accountId",
			title: "客户ID",
		},
		{
			key: "userName", dataIndex: "userName",
			title: "姓名",
		},
		{
			key: "mobile", dataIndex: "mobile",
			title: "手机号",
			width: 130
		},
		{
			key: "createTime", dataIndex: "createTime",
			title: "领取时间",
		},
		{
			key: "status", 
			dataIndex: "status",
			title: "优惠券状态",
			render: (text, record) => {
				return <div>
					{text + '' === '0' && '未使用'}
					{text + '' === '1' && '已使用'}
					{text + '' === '2' && '已过期'}
				</div>
			}
		},
		{
			key: "verificationMan", dataIndex: "verificationMan",
			title: "核销人",
			width:100,
		},
		{
			key: "usedTime", dataIndex: "usedTime",
			title: "核销时间",
			width:150
		},
		{
			key: "handle", dataIndex: "handle",
			title: "操作",
			width:60,
			render:(a,item,index)=>{
				if(item.status+''=='0'){
					return (
						<a onClick={() => hx(item.code)}>核销</a>
					)
				} else {
					return ''
				}
			}
		}
	]
	const gridProps = {
		data: {
			columns,
			pageConfig,
			tableData
		},
		pageChange: (pageNo, pageSize) => {
			console.log(pageNo, pageSize)
			dispatch({ type: `${namespace}/pageChange`, payload: { pageNo, pageSize } });
		},
		scroll: { x: 1100 },
		loading
	}
	//查询
	const onSearch = (payload) => {
		dispatch({
		  type: `${namespace}/search`,
		  payload: payload
		})
	  }
	return (
		<div className={cx('pageLayout')} className={styles.couponDetail}>
			<CollapsiblePanels title="优惠券基本信息" hideUpDownBtn={true} className={styles.basicInfo}>
				<Row>
					<Col span={10}>优惠券名称：</Col>
					<Col span={12}>{detail.name}</Col>
				</Row>
				<Row>
					<Col span={10}>优惠券有效期：</Col>
					<Col span={12}>{detail.startTime}{detail.startTime && detail.expireDate && '-'}{detail.expireDate}</Col>
				</Row>
				<Row>
					<Col span={10}>优惠券类型：</Col>
					<Col span={12}>{couponTypeMap[detail.type || '']}</Col>
				</Row>
				<Row>
					<Col span={10}>适用楼盘：</Col>
					<Col span={12}>{
						(() => {
							let arr = []
							detail.couponsConfigProductResDtos && detail.couponsConfigProductResDtos.forEach((e, i) => { arr.push(e.productName) })
							return arr.join('、')
						})()
					}</Col>
				</Row>
				{
					// <Row>
					// 	<Col span={10}>优惠券触达方式：</Col>
					// 	<Col span={12}>微信；短信</Col>
					// </Row>
				}
			</CollapsiblePanels>
			{/* <CollapsiblePanels title="优惠券预览页" hideUpDownBtn={true} >
				<div className={styles.couponPreview}>
					<div>
						<p style={{ fontSize: '18px' }}>9折券</p>
						<span>认购优惠使用</span>
					</div>
					<div>
						<p>折扣适用全国各大区域楼盘</p>
						<p>2018.07.32-2018.08.23</p>
						<p>
							<Button>转赠</Button>
							<Button>立即使用</Button>
						</p>
					</div>
				</div>
			</CollapsiblePanels> */}
			<CollapsiblePanels title="优惠券领取使用详情" hideUpDownBtn={true} >
				<AdvanceSearch
					footer={
						<span>
							<Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={modelObj.loading}>搜索</Button>
							<Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
						</span>
					}
				>
					<QueryCondition
						data={queryList}
						inputChange={(key, value) => dispatch({ type: `${namespace}/inputChange`, payload: { key, value } })}
					/>
				</AdvanceSearch>
				{/* 表格区域 */}
				<div className="boxShadow">
					{/* 搜索条件 */}

					{/* 添加用户 */}
					<Grid {...gridProps} />
				</div>
			</CollapsiblePanels>

		</div>
	)
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(couponDetailView))
